<!doctype html>
<html>
<head>
<!-- TODO(wnwen): Investigate using widgets from ui/webui/resources -->
<link rel="stylesheet" type="text/css" href="../res/setup.css">
<style type="text/css">
* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
}
</style>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="storage.js"></script>
<script type="text/javascript" src="matrix.js"></script>
<script type="text/javascript" src="cvd_type.js"></script>
<script type="text/javascript" src="cvd.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
  <h2><span i18n-content="color_enhancer_appname"><span></h2>

  <table>
    <tr>
      <th><span i18n-content="color_enhancer_enable"></span></th>
      <th>
        <span i18n-content="color_enhancer_adjustment_factor">
        </span>
      </th>
    </tr>
    <tr>
      <td><input id="enable" type="checkbox"></td>
      <td>
        <input id="delta" type="range" min=0 max=1.0 step=0.1
          defaultValue="0.5">
      </td>
      <td>
        <button id="setup" i18n-content="color_enhancer_setup_button"></button>
      </td>
      <td>
        <button id="advanced-toggle" i18n-content="color_enhancer_advanced" disabled></button>
      </td>
    </tr>
  </table>
  </div>

  <div id="setup-panel" class="collapsed">
    <h3><span i18n-content="color_enhancer_setup_heading"></span></h3>
    <section id="step-1">
      <div>
        <span i18n-content="color_enhancer_type_choice">
        </span>
      </div>
      <div class="template swatch">
        <span>&#x22c6</span>
      </div>
      <div id="swatches">
        <div id="row-highlight" hidden></div>
        <!-- Auto populated by initialize() -->
      </div>
    </section>
    <section id="step-2">
      <div>
        <span i18n-content="color_enhancer_severity">
        </span>
        <input id="severity" type="range" min=0 max=1.0 step=0.1 value="0">
      </div>
    </section>
    <section id="step-3" class="advanced">
      <div>
        <span i18n-content="color_enhancer_axis">
        </span>
      </div>
      <div id="row-axis" class="row">
        <label>
          <input type="radio" class="axis" id="axis-default" name="CvdAxis" value="DEFAULT">
          <span i18n-content="color_enhancer_axis_default"> </span></input>
        </label>
        <label>
          <input type="radio" class="axis" id="axis-red" name="CvdAxis" value="RED">
          <span i18n-content="color_enhancer_axis_red"> </span></input>
        </label>
        <label>
          <input type="radio" class="axis" id="axis-green" name="CvdAxis" value="GREEN">
          <span i18n-content="color_enhancer_axis_green"> </span></input>
        </label>
        <label>
          <input type="radio" class="axis" id="axis-blue" name="CvdAxis" value="BLUE">
          <span i18n-content="color_enhancer_axis_blue"> </span></input>
        </label>
      </div>
    </section>
    <div id="setup-button-strip" class="row">
      <button id="reset" i18n-content="color_enhancer_reset"></button>
      <button id="ok" i18n-content="color_enhancer_ok"></button>
      <button id="cancel" i18n-content="color_enhancer_cancel"></button>
    </div>
  </div>
</body>
</html>
